<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="200px">
      <el-form-item label="商铺名称" prop="shopName">
        <el-input v-model="queryParams.shopName" placeholder="请输入商铺名称" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <el-form-item label="店铺类型" prop="shopType">
        <el-select v-model="queryParams.shopType" placeholder="请选择店铺类型" clearable class="!w-240px">
          <el-option v-for="dict in typeList" :key="dict.id" :label="dict.typeName" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
        <el-button type="primary" @click="openForm('create', null)">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="店铺名称" align="center" prop="shopName" />
      <el-table-column label="店铺类型" align="center" prop="shopType" />
      <el-table-column label="售卖商品类型" align="center" prop="saleType" />
      <el-table-column label="店铺状态" align="center" prop="status" />
      <el-table-column label="联系人手机号" align="center" prop="phoneNumber" />
      <el-table-column label="联系人微信号" align="center" prop="wechat" />
      <el-table-column label="是否开业" align="center" prop="opened" />
      <el-table-column label="注册类型" align="center" prop="registerType" />
      <el-table-column label="地址" align="center" prop="location" />
      <el-table-column label="操作" align="center" class="w-120px">
        <template #default="scope">
          <el-button type="primary" plain @click="openForm('update', scope.row)">
            修改
          </el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>
  <!-- 弹窗 -->
  <Dialog :title="dialogShowInputTitle" v-model="dialogShowInput"
    style="display: block;flex-direction: column;width: 700px;">
    <el-form :model="formData" :rules="formRules" label-width="120px">
      <el-form-item label="店铺名称" prop="shopName">
        <el-input v-model="formData.shopName" clearable placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item label="店铺类型" prop="shopType">
        <el-select v-model="formData.shopType" class="!w-240px" clearable placeholder="请选择店铺注册类型">
          <el-option v-for="dict in typeList" :key="dict.id" :label="dict.typeName" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="售卖商品类型" prop="saleType">
        <el-select v-model="formData.saleType" class="!w-240px" clearable placeholder="请选择店铺注册类型">
          <el-option v-for="item in saleTypeList" :key="item.id" :label="item.catName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="店铺展示图" prop="postPic">
        <UploadImg v-model="formData.postPic" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio key="true" :label="1" border>正常</el-radio>
          <el-radio key="false" :label="0" border>封禁</el-radio>
          <el-radio key="false" :label="2" border>还未初始化</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="人均消费" prop="avgMoney">
        <el-input v-model="formData.avgMoney" type="number" clearable placeholder="请输入人均消费金额" />
      </el-form-item>
      <el-form-item label="联系人手机号" prop="phoneNumber">
        <el-input v-model="formData.phoneNumber" type="number" clearable placeholder="请输入联系人手机号" />
      </el-form-item>
      <el-form-item label="联系人微信号" prop="wechat">
        <el-input v-model="formData.wechat" clearable placeholder="请输入联系人微信号" />
      </el-form-item>
      <el-form-item label="支付宝账号" prop="alipay">
        <el-input v-model="formData.alipay" clearable placeholder="请输入支付宝账号" />
      </el-form-item>
      <el-form-item label="银行卡账户" prop="bankAccount">
        <el-input v-model="formData.bankAccount" type="number" clearable placeholder="请输入银行卡账户" />
      </el-form-item>
      <el-form-item label="是否开业" prop="opened">
        <el-radio-group v-model="formData.opened">
          <el-radio key="true" :label="true" border>是</el-radio>.
          0
          <el-radio key="false" :label="false" border>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="店铺注册类型" prop="registerType">
        <el-select v-model="formData.registerType" class="!w-240px" clearable placeholder="请选择店铺注册类型">
          <el-option v-for="dict in modeList" :key="dict.id" :label="dict.label" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="营业执照信息ID" prop="businessLicenseId">
        <el-input v-model="formData.businessLicenseId" clearable placeholder="请输入银行卡账户" />
      </el-form-item>
      <el-form-item label="商铺地址" prop="location">
        <el-input v-model="formData.location" clearable placeholder="请输入商铺" />
      </el-form-item>
      <el-form-item label="营业时间" prop="businessTime">
        <el-input v-model="formData.businessTime" clearable placeholder="请输入营业时间" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary">提交</el-button>
      <el-button @click="rejectSubmit">取消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { storeApi } from '@/api/shops/store'
import { StoreTypeApi } from '@/api/shops/storeType'
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  shopName: undefined,
  shopType: undefined
})
const formRules = reactive({
  shopName: [{ required: true, message: '商铺名称不能为空', trigger: 'blur' }],
  shopType: [{ required: true, message: '商铺类型不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '联系人电话不能为空', trigger: 'blur' }],
})
const formData = ref({
  tenantId: undefined,
  shopName: undefined,
  shopType: undefined,
  saleType: undefined,
  postPic: undefined,
  status: undefined,
  phoneNumber: undefined,
  wechat: undefined,
  avgMoney:undefined,
  businessTime:undefined,
  alipay: undefined,
  bankAccount: undefined,
  opened: undefined,
  registerType: undefined,
  businessLicenseId: undefined,
  location: undefined
})
const modeList = ref([
  { label: "个人店铺没有营业执照", id: 0 },
  { label: "个体商户", id: 1 },
  { label: "企业商户", id: 2 }
])
const message = useMessage()
const loading = ref(false)
const list = ref([])
const total = ref(0)
const typeList = ref([
  { typeName: undefined, id: undefined }
])
const saleTypeList = ref([
  { catName:undefined,id:undefined }
])
const queryFormRef = ref() // 搜索的表单
const dialogShowInputTitle = ref('')
const { t } = useI18n() // 国际化
const dialogShowInput = ref(false)
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const rejectSubmit = () => {
  dialogShowInput.value = false
}
// 打开弹窗
const 还原数据 = (item: any) => {
  console.log(item);
  console.log(typeList.value);
  console.log(modeList.value);
  

  const originalItem = {
    ...item,
    shopType: typeList.value.find(cos => cos.typeName == item.shopType)?.id,
    saleType: saleTypeList.value.find(dis => dis.catName == item.saleType)?.id,
    status: item.status === '正常' ? 1 : item.status == '还未初始化' ? 2 : 0,
    opened: item.opened === '是' ? true : false,
    registerType: modeList.value.find(num => num.label == item.registerType)?.id
  };
  return originalItem;
};

const openForm = async (type: any, row: any) => {
  dialogShowInput.value = true;
  if (type === 'create') {
    dialogShowInputTitle.value = '新增';
    formData.value = {
      tenantId: undefined,
      shopName: undefined,
      shopType: undefined,
      saleType:undefined,
      postPic: undefined,
      status: undefined,
      phoneNumber: undefined,
      wechat: undefined,
      alipay: undefined,
      businessTime:undefined,
      bankAccount: undefined,
      opened: undefined,
      registerType: undefined,
      businessLicenseId: undefined,
      location: undefined
    };
  } else if (type === 'update') {
    dialogShowInputTitle.value = '修改';
    formData.value = 还原数据(row);
  }
};
// 删除
const handleDelete = async (row: any) => {
  await storeApi.deleteStore(row.id)
  message.success(t('common.delSuccess'))
  getList()
}
// 初始化数据列表
const getList = async () => {
  const params = reactive({
    pageNo: 1,
    pageSize: 100,
    parentId: 0
  })

  loading.value = true;
  const typeData = await StoreTypeApi.getStoreTypePage(queryParams);
  typeList.value = typeData.list;
  const saleTypeData = await StoreTypeApi.getStoreSaleTypePage(params)
  saleTypeList.value = saleTypeData.list
  try {
    const data = await storeApi.getStorePage(queryParams);
    const datalist = data.list.map(item => {
      const newItem = {
        ...item,
        shopType: typeList.value.find(cos => cos.id == item.shopType)?.typeName || item.shopType,
        saleType: saleTypeList.value.find(dis => dis.id == item.saleType)?.catName || item.saleType,
        status: item.status === 1 ? '正常' : item.status == 2 ? '还未初始化' : '封禁',
        opened: item.opened === true ? '是' : '否',
        registerType: modeList.value.find(num => num.id == item.registerType)?.label || item.registerType
      };
      return newItem;
    });
    list.value = datalist;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
// 表单的提交事件
const submitForm = async () => {
  const id = (localStorage.getItem('tenantId'))
  const id1 = JSON.parse(id)
  formData.value.tenantId = id1.v
  if (dialogShowInputTitle.value === '新增') {
    try {
      await storeApi.createStore(formData.value)
      message.success(t('common.createSuccess'))
      getList()
    } finally {
      dialogShowInput.value = false;
    }
  }
  if (dialogShowInputTitle.value === '修改') {
    try {
      await storeApi.updateStore(formData.value)
      message.success(t('common.updateSuccess'))
      getList()
    } finally {
      dialogShowInput.value = false;
    }
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>